<template>
    <view class="page">
        <view class="info">
            <view class="info_item info_header">
                <view class="label"><text class="must">*</text>头像</view>
                <view class="photo">
                    <image
                        :src="info.photo ? info.photo : defaultAvatar"
                        mode=""
                        class="photo_img"
                        @click="handlePreview"
                    >
                    </image>
                    <image
                        :src="arrow"
                        mode=""
                        class="arrow"
                        @click="() => popupRef.open()"
                    ></image>
                </view>
            </view>
            <view class="info_item info_nickname">
                <view class="label"><text class="must">*</text>昵称</view>
                <input
                    v-model="info.nickName"
                    class="input_box"
                    placeholder="请输入昵称"
                    maxlength="20"
                    placeholder-style="color:rgba(169, 170, 181, 1);text-align: right;font-size:30rpx;"
                />
            </view>
        </view>
        <view class="btn">
            <button class="single btn_save">保存</button>
            <button class="single btn_quit" @click="loginOut">退出登录</button>
        </view>
        <!-- 弹出框选项 -->
        <view class="picker_box">
            <uni-popup ref="popupRef" :is-mask-click="true" :animation="true" type="bottom">
                <view class="popup_box">
                    <view class="header_title"> 选择上传方式 </view>
                    <view class="method_list">
                        <view
                            v-for="i in pickList"
                            :key="i.type"
                            class="item"
                            @click="chooseUploadMethod(i)"
                        >
                            {{ i.name }}
                        </view>
                    </view>
                </view>
            </uni-popup>
        </view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { user } from '@/store';
const popupRef = ref(null);
const OSS_URL = import.meta.env.VITE_OSS_HOST;
const defaultAvatar = `${OSS_URL}/urm/default_avatar.png`;
const arrow = `${OSS_URL}/iconfont/down_arrow.png`;
const { logout }  = user()
const indicatorStyle = ref(`height: 50px;`);
const pickList = ref([
    {
        name: '从相册选择',
        type: 1,
        sourceType: 'album',
    },
    {
        name: '拍照上传',
        type: 2,
        sourceType: 'camera',
    },
]);
const info = ref({
    photo: '',
    nickName: '',
});

function handlePreview() {
    if (!info.value.photo) return;
    uni.previewImage({
        urls: [info.value.photo],
        current: 0,
    });
}

function chooseUploadMethod(i) {
    popupRef.value.close();
    uni.chooseImage({
        count: 1, // 最多可以选择的图片张数
        sizeType: ['compressed', 'original'], // original 原图，compressed 压缩图，默认二者都有
        sourceType: [i.sourceType], // album 从相册选图，camera 使用相机，默认二者都有
        success: res => {
            console.log(res.tempFilePaths);
            uni.navigateTo({
                url: `/pages/mine/prefectInformation/cropper?file=${res.tempFilePaths[0]}`,
            });
        },
        fail: err => {
            // 图片接口调用失败的回调函数
            console.log('chooseImage fail', err);
        },
    });
}

function confirmPicker(val) {
    console.log(val);
}

function loginOut(){
    uni.showModal({
        title: '提示',
        content: '是否退出登录',
        success: function (res) {
            if (res.confirm) {
                logout();
            } else if (res.cancel) {
                console.log('用户点击取消');
            }
        },
    });
    
}

onLoad(option => {
    info.value.photo = option.cropFile;
});
</script>

<style lang="scss" scoped>
.page {
    padding: 30rpx;

    .info {
        padding: 0 30rpx;
        margin-bottom: 100rpx;
        background-color: #fff;
        border-radius: 20rpx;

        &_item {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .label {
            font-size: 30rpx;
            line-height: 42rpx;
            color: rgba(51, 51, 51, 1);
            font-weight: 500;

            .must {
                color: red;
            }
        }

        &_header {
            padding: 20rpx 0;
            border-bottom: 1rpx solid rgba(238, 238, 238, 1);
        }

        &_nickname {
            padding: 28rpx 0;

            .input_box {
                text-align: right;
                width: 420rpx;
                font-size: 30rpx;
                color: rgba(51, 51, 51, 1);
                line-height: 42rpx;
            }
        }

        .photo {
            display: flex;
            align-items: center;

            .photo_img {
                width: 100rpx;
                height: 100rpx;
                border-radius: 50%;
            }

            .arrow {
                margin-left: 10rpx;
                width: 30rpx;
                height: 30rpx;
                transform: rotate(-90deg);
            }
        }
    }

    .btn {
        .single {
            margin: 0 0 40rpx 0;
            height: 90rpx;
            line-height: 90rpx;
            font-size: 30rpx;
            border-radius: 20rpx;

            &::after {
                border: none;
            }
        }

        &_save {
            background-color: rgba(97, 93, 255, 1);
            color: #fff;
        }

        &_quit {
            background-color: rgba(239, 239, 255, 1);
            color: rgba(97, 93, 255, 1);
        }
    }

    .popup_box {
        height: 351rpx;
        background-color: #fff;
        border-radius: 20rpx 20rpx 0 0;
        overflow: hidden;

        .header_title {
            margin: 30rpx 0 0 30rpx;
            color: rgba(51, 51, 51, 1);
            font-size: 32rpx;
            font-weight: 500;
        }

        .method_list {
            text-align: center;
            padding: 0 54rpx;

            .item {
                padding: 30rpx 0;
                border-bottom: 1rpx solid rgba(235, 235, 235, 1);
                font-weight: 400;
                height: 45rpx;
                color: rgba(51, 51, 51, 1);
            }
        }
    }
}
</style>
